<template>
  <div id="info" class="mytable">
    <div v-if="loadingText" style="padding: 10px;">{{ loadingText }}</div>
    <el-scrollbar v-else style="height: calc(100% + 17px)">
      <table cellspacing="0" cellpadding="0" class="bztable centertable">
        <template v-if="sourceTable === 'centre_sy_nsjg'">
          <tr>
            <th></th>
            <th colspan="2">内设机构领导职数</th>
          </tr>
          <tr>
            <th></th>
            <th>正职</th>
            <th>副职</th>
          </tr>
          <tr v-if="flag !== 'user'">
            <th>批准</th>
            <td>{{ unitInfo.count3 }}</td>
            <td>{{ unitInfo.count4 }}</td>
          </tr>
          <tr v-else>
            <th>批准</th>
            <td>
              <el-input-number v-model="unitInfo.count3" :min="0"></el-input-number>
            </td>
            <td>
              <el-input-number v-model="unitInfo.count4" :min="0"></el-input-number>
            </td>
          </tr>
          <tr>
            <th>实有</th>
            <td>{{ unitInfo.count11 }}</td>
            <td>{{ unitInfo.count22 }}</td>
          </tr>
          <tr>
            <th>空编</th>
            <td :class="{colorGreen: emptyCountHandler(unitInfo.count3, unitInfo.count11) > 0, colorRed: emptyCountHandler(unitInfo.count3, unitInfo.count11) < 0}">
              {{ emptyCountHandler(unitInfo.count3, unitInfo.count11) }}
            </td>
            <td :class="{colorGreen: emptyCountHandler(unitInfo.count4, unitInfo.count22) > 0, colorRed: emptyCountHandler(unitInfo.count4, unitInfo.count22) < 0}">
              {{ emptyCountHandler(unitInfo.count4, unitInfo.count22) }}
            </td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <th></th>
            <th colspan="2">领导职数</th>
            <th v-if="type === 2" colspan="2">内设机构领导职数</th>
          </tr>
          <tr>
            <th></th>
            <th>正职</th>
            <th>副职</th>
            <th v-if="type === 2">正职</th>
            <th v-if="type === 2">副职</th>
          </tr>
          <tr v-if="flag !== 'user'">
            <th>批准</th>
            <td>{{ unitInfo.count1 }}</td>
            <td>{{ unitInfo.count2 }}</td>
            <td v-if="type === 2">{{ unitInfo.count3 }}</td>
            <td v-if="type === 2">{{ unitInfo.count4 }}</td>
          </tr>
          <tr v-else>
            <th>批准</th>
            <td>
              <el-input-number v-model="unitInfo.count1" :min="0"></el-input-number>
            </td>
            <td>
              <el-input-number v-model="unitInfo.count2" :min="0"></el-input-number>
            </td>
            <td v-if="type === 2">
              <el-input-number v-model="unitInfo.count3" :min="0"></el-input-number>
            </td>
            <td v-if="type === 2">
              <el-input-number v-model="unitInfo.count4" :min="0"></el-input-number>
            </td>
          </tr>
          <tr>
            <th>实有</th>
            <td>{{ unitInfo.count11 }}</td>
            <td>{{ unitInfo.count22 }}</td>
            <td v-if="type === 2">{{ unitInfo.count33 }}</td>
            <td v-if="type === 2">{{ unitInfo.count44 }}</td>
          </tr>
          <tr>
            <th>空编</th>
            <td :class="{colorGreen: emptyCountHandler(unitInfo.count1, unitInfo.count11) > 0, colorRed: emptyCountHandler(unitInfo.count1, unitInfo.count11) < 0}">
              {{ emptyCountHandler(unitInfo.count1, unitInfo.count11) }}
            </td>
            <td :class="{colorGreen: emptyCountHandler(unitInfo.count2, unitInfo.count22) > 0, colorRed: emptyCountHandler(unitInfo.count2, unitInfo.count22) < 0}">
              {{ emptyCountHandler(unitInfo.count2, unitInfo.count22) }}
            </td>
            <td v-if="type === 2" :class="{colorGreen: emptyCountHandler(unitInfo.count3, unitInfo.count33) > 0, colorRed: emptyCountHandler(unitInfo.count3, unitInfo.count33) < 0}">
              {{ emptyCountHandler(unitInfo.count3, unitInfo.count33) }}
            </td>
            <td v-if="type === 2" :class="{colorGreen: emptyCountHandler(unitInfo.count4, unitInfo.count44) > 0, colorRed: emptyCountHandler(unitInfo.count4, unitInfo.count44) < 0}">
              {{ emptyCountHandler(unitInfo.count4, unitInfo.count44) }}
            </td>
          </tr>
        </template>
      </table>
      <div v-if="flag === 'user'" style="display: flex; justify-content: center; margin-bottom: 20px;">
        <el-button type="primary" :loading="btnLoading" @click="saveLeaderCount()">保存</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'DetailCount',
  props: {
    jgsyCode: '',
    jgsyCodeMinistry: '',
    flag: '',
    type: '',
    dClass: '',
    sourceTable: '',
    allPersonInfoList: {
      required: false,
      type: Array,
      default: () => []
    },
    leaderCountObj: {
      required: false,
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    jgsyCode: {
      handler () {
        this.loadingText = '正在加载中，请稍后...'
      },
      immediate: true
    },
    jgsyCodeMinistry: {
      handler () {
        this.loadingText = '正在加载中，请稍后...'
      },
      immediate: true
    },
    allPersonInfoList: {
      handler () {
        this.personInfoHandler()
      }
    }
  },
  data () {
    return {
      loadingText: '正在加载中，请稍后...',
      unitInfo: {
        dataId: null,
        count1: 0,
        count2: 0,
        count3: 0,
        count4: 0,
        count11: 0,
        count22: 0,
        count33: 0,
        count44: 0
      },
      btnLoading: false
    }
  },
  methods: {
    // 处理人员信息
    personInfoHandler () {
      this.loadingText = '正在加载中，请稍后...'
      this.unitInfo = {
        dataId: null,
        count1: 0,
        count2: 0,
        count3: 0,
        count4: 0,
        count11: 0,
        count22: 0,
        count33: 0,
        count44: 0
      }
      this.unitInfo.dataId = this.leaderCountObj.dataId || null
      if (this.sourceTable === 'depart' && this.dClass !== '1e') {
        this.unitInfo.count1 = this.leaderCountObj ? this.leaderCountObj.nsldzzbz : -1
        this.unitInfo.count2 = this.leaderCountObj ? this.leaderCountObj.nsldfzbz : -1
        this.unitInfo.count3 = this.leaderCountObj ? this.leaderCountObj.nsldzzbz2 : -1
        this.unitInfo.count4 = this.leaderCountObj ? this.leaderCountObj.nsldfzbz2 : -1
      } else {
        this.unitInfo.count1 = this.leaderCountObj ? this.leaderCountObj.bmldzzbz : -1
        this.unitInfo.count2 = this.leaderCountObj ? this.leaderCountObj.bmldfzbz : -1
        this.unitInfo.count3 = this.leaderCountObj ? this.leaderCountObj.nsldzzbz : -1
        this.unitInfo.count4 = this.leaderCountObj ? this.leaderCountObj.nsldfzbz : -1
      }
      let personList = this.allPersonInfoList || []
      if (personList.length > 0) {
        if (this.jgsyCodeMinistry) {
          // 正职
          this.unitInfo.count11 = personList.filter(item => item.leaderType === 1 && item.szjg === this.jgsyCode).length
          // 副职
          this.unitInfo.count22 = personList.filter(item => item.leaderType === 2 && item.szjg === this.jgsyCode).length
          // 内设机构 - 正职
          this.unitInfo.count33 = personList.filter(item => item.leaderType === 1 && item.szjg !== this.jgsyCode).length
          // 内设机构 - 副职
          this.unitInfo.count44 = personList.filter(item => item.leaderType === 2 && item.szjg !== this.jgsyCode).length
        } else {
          if (this.type === 2) {
            // 正职
            this.unitInfo.count11 = personList.filter(item => item.leaderType === 1 && item.szjg === this.jgsyCode).length
            // 副职
            this.unitInfo.count22 = personList.filter(item => item.leaderType === 2 && item.szjg === this.jgsyCode).length
            // 内设机构 - 正职
            this.unitInfo.count33 = personList.filter(item => item.leaderType === 1 && item.szjg !== this.jgsyCode).length
            // 内设机构 - 副职
            this.unitInfo.count44 = personList.filter(item => item.leaderType === 2 && item.szjg !== this.jgsyCode).length
          } else if (this.type === 3) {
            // 正职
            this.unitInfo.count11 = personList.filter(item => item.leaderType === 1 && item.szjg).length
            // 副职
            this.unitInfo.count22 = personList.filter(item => item.leaderType === 2 && item.szjg).length
          }
        }
      }
      this.loadingText = ''
    },
    // 保存
    saveLeaderCount () {
      const para = {
        dataId: this.unitInfo.dataId
      }
      if (this.sourceTable === 'depart' && this.dClass !== '1e') {
        para.nsldzzbz = this.unitInfo.count1
        para.nsldfzbz = this.unitInfo.count2
        para.nsldzzbz2 = this.unitInfo.count3
        para.nsldfzbz2 = this.unitInfo.count4
      } else {
        para.bmldzzbz = this.unitInfo.count1
        para.bmldfzbz = this.unitInfo.count2
        para.nsldzzbz = this.unitInfo.count3
        para.nsldfzbz = this.unitInfo.count4
      }
      this.btnLoading = true
      this.$http
        .post(this.$http.defaults.headcountAPI + 'api/bmldzs/save', para)
        .then(response => {
          if (response.data.success === true) {
            this.btnLoading = false
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
            this.btnLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.btnLoading = false
        })
    },
    // 计算空编数
    emptyCountHandler (para1, para2) {
      if (typeof para1 !== 'number' || typeof para2 !== 'number') {
        return ''
      } else {
        return para1 - para2
      }
    }
  }
}
</script>

<style>
#info{
  overflow: hidden;
}

.colorGreen{
  color: green;
}

.colorRed{
  color: red;
}
</style>
